<template>
	<view>
		<scroll-view :class="className" :refresher-enabled="scrollTop <= 20" scroll-y="true"
			:refresher-triggered="triggered" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore" @refresherabort="onAbort" refresher-default-style="none"
			:refresher-threshold="0" scroll-anchoring="true" @scroll="onScroll" @scrolltolower="onReachScollBottom">
			<view v-if="triggered" class="loading">
				<!-- 加载中样式 -->
				<view class="loadingThree">
					<view></view>
					<text>加载中...</text>
				</view>
			</view>
			<slot></slot>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			className: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				triggered: false, // 下拉刷新是否被触发 true:被触发了 / false:没有触发
				scrollTop: 0, // 当前滚动到顶部的距离
				isLoadingMore: false, // 触底加载更多 true:处理中 / false:空闲
			};
		},
		onLoad() {},
		methods: {
			onPulling(e) {
				if (this.scrollTop <= 20 && e.detail.dy > 100) {}
			},
			// 自定义下拉刷新被触发
			onRefresh(e) {
				this.triggered = true; // 启动刷新
				this.$emit("refresh"); // 触发父组件刷新方法
			},
			closeRefresh() { // 关闭刷新  父组件调用
				this.triggered = false;
			},
			closePrevPage() { // 关闭加载更多  父组件调用
				this.isLoadingMore = false;
			},
			// 自定义下拉刷新被复位
			onRestore() {},
			// 自定义下拉刷新被中止
			onAbort() {},
			// 滚动
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			// 触底加载更多
			onReachScollBottom(e) {
				if (this.isLoadingMore) {
					return;
				}
				this.isLoadingMore = true;
				this.$emit("prevPage"); // 触发父组件加载更多方法
			},
		},
	};
</script>

<style lang="scss" scoped>
	// 引入sass样式变量(本来想全局引入，但是不成功，以后有空再解决)
	@import '@/static/scss/variables.scss';

	.loading {
		background-color: rgba(0, 0, 0, 0);
		height: 2rem;
		position: relative;

		.loadingThree {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 2rem;
			background-color: rgba(0, 0, 0, 0);

			view {
				width: 0.75rem;
				height: 0.75rem;
				margin-right: 10px;
				border-radius: 50%;
				background: $colorPrimary;
				-webkit-animation: load 1.04s ease infinite;
			}

			text {
				-webkit-animation: load 1.04s ease infinite;
			}
		}

		@-webkit-keyframes load {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0.2;
			}
		}
	}
</style>
